<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:sec="http://www.springframework.org/security/tags"
	xmlns:p="http://primefaces.org/ui">

	<h:form id="recipe_comment">
		<ui:fragment>
			<div class="row-fluid">
				<div class="span4 offset8">
									<sec:authorize ifAnyGranted="ROLE_USER">
						<div class="juice-recipe-action">
							<i class="icon-plus"></i> <a href="#addCommentBox"
								data-toggle="modal" class="btn btn-link juice-pureLink">Ajouter un
								commentaire</a>
						</div>
					</sec:authorize>
				</div>
			</div>
			<div class="row-fluid">
				<div class="span12">
					<p>
						<ui:repeat var="c" value="#{C_RECIPE.paginator.current}"
							varStatus="s">
							<p class="muted">
								<i class="icon-comment"></i>
								<h:outputText style="margin-left: 10px;"
									value="#{c.author.nickName} le " />
								<h:outputText value="#{c.created}">
									<f:convertDateTime timeStyle="long" />
								</h:outputText>
							</p>
							<p style="margin-left: 20px; margin-top: -10px;">
								<h:outputText value="#{c.content}" />
							</p>
						</ui:repeat>
					</p>
				</div>
			</div>
			<h:panelGroup rendered="#{C_RECIPE.paginator.psize > 1}"
				layout="block" style="margin-top: 20px;">
				<hr />
				<div class="controls">
					<h:commandButton
						styleClass="#{C_RECIPE.previous ? 'btn btn-mini' : 'btn disabled btn-mini'}"
						value="Précédent" action="#{C_RECIPE.getPrevious}"
						disabled="#{! C_RECIPE.previous}" />
					<strong><small><h:outputText style="margin-left: 20px; margin-right: 20px;"  
							value="#{C_RECIPE.paginator.displayIndex} / #{C_RECIPE.paginator.psize}" />
					</small></strong>
					<h:commandButton
						styleClass="#{C_RECIPE.next ? 'btn btn-mini' : 'btn disabled btn-mini'}"
						value="Suivant" action="#{C_RECIPE.getNext}"
						disabled="#{! C_RECIPE.next}" />
				</div>
			</h:panelGroup>
		</ui:fragment>
	</h:form>

	<h:form id="recipe_comment_action" class="form-horizontal" method='POST'>
		<div id="addCommentBox" class="modal hide fade" tabindex="-1"
			role="dialog" aria-labelledby="add_comment" aria-hidden="true">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">×</button>
				<h3 id="add_comment">Ajouter un commentaire</h3>
			</div>
			<div class="modal-body">
				<div class="control-group">
					<label class="control-label" for="input_comment">Commentaire</label>
					<div class="controls">
						<h:inputTextarea value="#{C_RECIPE.newComment}" rows="5" id="input_comment"
							name="input_comment" placeholder="Commentaire" />
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<h:commandButton type="submit" styleClass="btn btn-primary"
					value="Ajouter" actionListener="#{C_RECIPE.addComment}">
				</h:commandButton>
				<button class="btn" data-dismiss="modal" aria-hidden="true">Annuler</button>
			</div>
		</div>
	</h:form>

</ui:composition>
